<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>Dashboard &laquo; Admin</title>
  <link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../assets/css/admin.css">
  <script src="../assets/vendors/nprogress/nprogress.js"></script>
</head>

<body>
  <script>
    NProgress.start()
  </script>

  <div class="main">
    <nav class="navbar">
      <button class="btn btn-default navbar-btn fa fa-bars"></button>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="profile.html"><i class="fa fa-user"></i>个人中心</a></li>
        <li><a href="login.html"><i class="fa fa-sign-out"></i>退出</a></li>
      </ul>
    </nav>
    <div class="container-fluid">
      <div class="row">

        <div class="jumbotron text-center">
          <h1>One Belt, One Road</h1>
          <p>Thoughts, stories and ideas.</p>
          <p><a class="btn btn-primary btn-lg" href="post-add.html" role="button">写文章</a></p>
        </div>

        <div class="row text-center" style="margin: 50px 10px 0 10px;">

          <div class="panel panel-default col-md-4">
            <canvas id="myChartA" height="280px"></canvas>
          </div>

          <div class="panel panel-default col-md-4">
            <canvas id="myChartB" height="280px"></canvas>
          </div>

          <div class="panel panel-default col-md-4">
            <canvas id="myChartC" height="280px"></canvas>
          </div>

        </div>

      </div>
    </div>
  </div>

  <div class="aside">
    <div class="profile">
      <img class="avatar" src="../uploads/avatar.jpg">
      <h3 class="name">布头儿</h3>
    </div>
    <ul class="nav">
      <li class="active">
        <a href="index.html"><i class="fa fa-dashboard"></i>站点统计</a>
      </li>
      <li>
        <a href="#menu-posts" class="collapsed" data-toggle="collapse">
          <i class="fa fa-thumb-tack"></i>用户<i class="fa fa-angle-right"></i>
        </a>
        <ul id="menu-posts" class="collapse">
          <li><a href="book-list.html">用户列表</a></li>
          <li><a href="book-add.html">录入用户</a></li>
        </ul>
      </li>
      <li>
        <a href="#user-settings" class="collapsed" data-toggle="collapse">
          <i class="fa fa-users"></i>后台管理<i class="fa fa-angle-right"></i>
        </a>
        <ul id="user-settings" class="collapse">
          <li><a href="user-list.html">权限设置</a></li>
          <li><a href="user-add.html">添加管理员</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <script src="../assets/vendors/jquery/jquery.js"></script>
  <script src="../assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script src="../assets/vendors/chart/Chart.js"></script>
  <script>
    NProgress.done()
  </script>
  <script>
    var dataA = {
      type: 'bar',
      data: {
        labels: ["一月", "二月", "三月", "四月", "五月", "六月"],
        datasets: [{
          label: "数据",
          data: [12, 19, 3, 5, 6, 3],
          backgroundColor: [
            'rgba(255, 99, 132)',
            'rgba(54, 162, 235)',
            'rgba(255, 206, 86)',
            'rgba(75, 192, 192)',
            'rgba(153, 102, 255)',
            'rgba(255, 159, 64)'
          ]
        }]
      },
      options: {
        title: {
          display: true,
          text: 'Custom Chart Title'
        }
      }
    };

    dataB = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [10, 20, 30],
          backgroundColor: [
            'rgba(255, 99, 132,.4)',
            'rgba(54, 162, 235,.5)',
            'rgba(255, 206, 86,.4)'
          ],
        }],
        labels: [
          'Red',
          'Yellow',
          'Blue'
        ]
      },
      options: {
        title: {
          display: true,
          text: 'Custom Chart Title'
        }
      }
    };

    dataC = {
      type: 'polarArea',
      data: {
        datasets: [{
          data: [10, 20, 30],
          backgroundColor: [
            'rgba(75, 192, 192,.5)',
            'rgba(153, 102, 255,.5)',
            'rgba(255, 159, 64,.5)'
          ]
        }],
        labels: [
          'Red',
          'Yellow',
          'Blue'
        ]
      },
      options: {
        title: {
          display: true,
          text: 'Custom Chart Title'
        }
      }
    }

    var ctxA = document.getElementById("myChartA").getContext('2d');
    var myChartA = new Chart(ctxA, dataA);

    var ctxB = document.getElementById("myChartB").getContext('2d');
    var myChartB = new Chart(ctxB, dataB);

    var ctxC = document.getElementById("myChartC").getContext('2d');
    var myChartC = new Chart(ctxC, dataC);
  </script>
</body>

</html>